<template>
  <div>
    <div class="navFunction">
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1">处理中心</el-menu-item>
        <el-submenu index="2">
          <template slot="title">{{SearchCondition}}</template>
          <el-menu-item index="name">名称</el-menu-item>
          <el-menu-item index="companyid">公司</el-menu-item>
          <el-menu-item index="age">年龄</el-menu-item>
          <el-menu-item index="email">邮箱</el-menu-item>
          <!-- <el-submenu index="2-4">
      <template slot="title">选项4</template>
      <el-menu-item index="2-4-1">选项1</el-menu-item>
      <el-menu-item index="2-4-2">选项2</el-menu-item>
      <el-menu-item index="2-4-3">选项3</el-menu-item>
          </el-submenu>-->
        </el-submenu>
        <el-menu-item index="3" disabled>消息中心</el-menu-item>
        <el-menu-item index="4">
          <a href="https://www.ele.me" target="_blank">订单管理</a>
        </el-menu-item>
        <div class="linquire">
          <!-- <div class="linquireNname">查询 :</div> -->

          <el-input v-model="input" :placeholder="SearchConditionVlue" :disabled="disabled"></el-input>
          <el-button @click="linquire" class="linquireButton" type="primary">点击查询</el-button>
        </div>
        <el-button @click="edit" class="edit" :type="typeVue">{{editVlue}}</el-button>
        <el-button @click="dialogVisible = true" type="success" plain>添加</el-button>
      </el-menu>
    </div>

    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="CompanyID" prop="companyid"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="Email" prop="email"></el-table-column>
      <el-table-column label="Age" prop="age"></el-table-column>
      <el-table-column label="Phone" prop="Phone"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">Edit</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 消息提示 -->
    <el-button :plain="false"></el-button>
    <!-- 添加 -->

    <el-dialog title="提示" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="名称">
          <el-input v-model="formLabelAlign.name"></el-input>
        </el-form-item>
        <el-form-item label="公司">
          <el-input v-model="formLabelAlign.companyid"></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="formLabelAlign.Phone"></el-input>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input v-model="formLabelAlign.age "></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="formLabelAlign.email"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="AddPost">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
           
<script>
import axios from "axios";
import { Message } from 'element-ui';

export default {
  name: "login",
  data() {
    return {
      dialogVisible: false,
      dangers: true,
      tableData: [],
      input: "",
      delte: false,
      editVlue: "编辑",
      typeVue: "primary",
      disabled: false,
      activeIndex: "1",
      activeIndex2: "1",
      SearchCondition: "搜索条件",
      SearchConditionVlue: "请输入内容",
 
      search: "",
      labelPosition: "left",
      formLabelAlign: {
        name: "",
        Phone: "",
        email: "",
        age: "",
        companyid: ""
      }
    };
  },
  beforeCreate: function() {},
  created: function() {
    this.Get();
  },
  //     watch :{
  //   height:{
  //     //变化后的值：newVal
  //     //变化前的值: oldVal
  //     handler(newVal,oldVal){

  //     },
  //     deep:true
  //   }
  // }

  methods: {
    Get() {
      let THIS = this;
      axios
        .get(" http://192.168.1.104:9999/users")
        .then(function(response) {
          // handle success
          THIS.tableData = response.data;
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .then(function() {
          // always executed
        });
    },
    // 编辑
    edit() {
      this.dangers = false;
      this.delte = !this.delte;

      if (this.delte) {
        this.editVlue = "取消编辑";
        this.typeVue = "danger";
        this.disabled = true;
      } else {
        this.editVlue = "编辑";
        this.typeVue = "primary";
        this.disabled = false;
        this.dangers = true;
      }
    },
    // 查询 'http://localhost:3000/users?'+this.SearchConditionVlue
    linquire() {
      console.log(this.input);
    
      let THIS = this;
       if (THIS.input==="") {
    
         THIS.Get()
       } else {
          axios
        .get(
          " http://192.168.1.104:9999/users?" +
            this.SearchConditionVlue +
            "=" +
            this.input
        )
        .then(function(response) {
        if (response.data.length!=0) {
          // handle success
          THIS.tableData = response.data;
          Message.success("搜索"+THIS.SearchCondition+"成功")
        
        } else {
               THIS.tableData = response.data;
            Message.success("没有"+THIS.SearchCondition+"为"+THIS.input+"的数据")
        }
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .then(function() {
          // always executed
        });
       }
    },

  

    handleSelect(key, keyPath) {
      this.SearchConditionVlue = key;
      console.log(this.SearchConditionVlue);
      if (key == "age") {
        this.SearchCondition = "年龄";
      }
      if (key == "name") {
        this.SearchCondition = "名称";
      }
      if (key == "companyid") {
        this.SearchCondition = "公司";
      }
      if (key == "email") {
        this.SearchCondition = "邮箱";
      }
    },
    handleEdit(index, row) {
      this.$router.push({ path: "/Edite/" + row.id });

      console.log(row.id);
    },
    handleDelete(index, row) {
      let THIS = this
      console.log(index, row.id);
      axios.delete(' http://192.168.1.104:9999/users/'+row.id)
  .then(function (response) {
    // handle success
    console.log(response);
    if(response.status === 200){
       THIS.Get()
    Message.success("删除成功")
    }
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
    },
    // 添加
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    // 添加请求
    AddPost() {
      let THIS = this;
      axios
        .post("http://192.168.1.104:9999/users", {
          name: THIS.formLabelAlign.name,
          email: THIS.formLabelAlign.email,
          Phone: THIS.formLabelAlign.Phone,
          age: THIS.formLabelAlign.age,
          companyid: THIS.formLabelAlign.companyid
        })
        .then(function(response) {
          console.log(response);
          if (response.status === 201) {
            THIS.dialogVisible = false;
        
           Message.success("添加成功")
         
           
            THIS.Get()
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>
<style scoped>
.el-menu-demo {
  width: 100%;
  display: flex;
  align-content: center;
}
.navFunction {
  /* width: 100%; */
  display: flex;
  justify-content: space-between;
}
.linquire {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  font-size: 26px;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  letter-spacing: 2px;
  padding: 0px 20px;
}
.linquireButton {
  margin-left: 20px;
}
/* .linquireNname{
  width: 200px;
  text-align: left;
} */
.function {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
.delte,
.up {
  width: 100px;
  height: 60px;
}
.AboutInputBox {
  padding: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  border: #2c3e50 solid 1px;
  margin: 20px 0px;
  align-items: center;
}
.inputBox {
  width: 100%;
  height: 100px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;

  margin: 0px 10px;
}
.name,
.Phone,
.email,
.id,
.age,
.companyid {
  font-size: 26px;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  padding-left: 10px;
  padding-right: 5px;
  color: #63bd67;
  width: 150px;
}
.key {
  width: 150px;
  font-size: 21px;
  color: #2c3e50;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
}

.key:hover {
  color: red;
}
.el-input {
  text-align: center;
  color: red;
}
</style>
